﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <link href="~/css/table.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef"
                 :model="ruleForm"
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm">
            <table width="100%">
                <tr>
                    <td>
                        <font color="black">
                            您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--II级机构设置--II级机构修改
                        </font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <el-button v-on:click="add()">修改</el-button>
                        <el-button v-on:click="close()">返回</el-button>
                    </td>
                </tr>
            </table>

            <table width="100%" border="1" cellpadding=0 cellspacing=1
                   bordercolorlight=#848284 bordercolordark=#eeeeee
                   class="TABLE_STYLE1">
                <tr>
                    <td width="19%" class="TD_STYLE1">
                        I级机构名称
                    </td>
                    <td width="81%" class="TD_STYLE2">
                        <el-form-item prop="firstKind" style="margin-left: 0px;">
                            <el-select v-model="ruleForm.firstKind" placeholder="请选择I级机构名称" value-key="firstKindId" style="width: 240px">
                                <el-option v-for="item in select"
                                           :key="item.firstKindId"
                                           :label="item.firstKindName"
                                           :value="item" />
                            </el-select>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td width="19%" class="TD_STYLE1">
                        II级机构编号
                    </td>
                    <td width="81%" class="TD_STYLE2">
                        <el-form-item prop="secondKindId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.secondKindId" class="INPUT_STYLE1" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        II级机构名称
                    </td>

                    <td class="TD_STYLE2" height="40px">
                        <el-form-item prop="secondKindName" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.secondKindName" class="INPUT_STYLE1" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        薪酬发放责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="secondSalaryId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.secondSalaryId"
                                      :rows="4"
                                      type="textarea" class="TEXTAREA_STYLE1" style="width: 80%" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td class="TD_STYLE1">
                        销售责任人编号（多个编号之间请用"半角逗号"加"一个空格"隔开，如", "）
                    </td>
                    <td class="TD_STYLE2">
                        <el-form-item prop="secondSaleId" style="margin-left: 0px;">
                            <el-input v-model="ruleForm.secondSaleId"
                                      :rows="4"
                                      type="textarea" class="TEXTAREA_STYLE1" style="width: 80%" />
                        </el-form-item>
                    </td>
                </tr>
            </table>

            <el-dialog v-model="dialogVisible"
                       title=""
                       width="500"
                       :before-close="handleClose">
                <span>变更成功！</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" v-on:click="close()">
                            返回
                        </el-button>
                    </div>
                </template>
            </el-dialog>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp, ref, reactive, computed } = Vue
    const { ElMessage } = ElementPlus
    var app = createApp({
        setup() {
            const ruleForm = reactive({
                //firstKindId:"",//一级机构编号
                //firstKindName:"",//一级机构名称
                fskId:"",
                firstKind:{},//一级机构名称 改为对象获取
                secondKindId:"",//二级机构编号
                secondKindName:"",//二级机构名称
                secondSalaryId:"",//负责人编号
                secondSaleId:""//销售负责人编号
            })

            let ruleFormRef = ref(null);//表单id
            const dialogVisible = ref(false)
            //表单验证规则
             const rules = reactive({
            firstKind: [
                //判断对象是否为空
                { required: true, validator: (rule, value, callback) => {
                if (!value || Object.keys(value).length === 0) {
                     callback(new Error('请选择I级机构名称'));
                } else if (!value.firstKindId) {
                     callback(new Error('请选择I级机构名称'));
                } else if (!value.firstKindName) {
                     callback(new Error('请选择I级机构名称'));
                } else {
                     callback();
                }
            }, trigger: 'blur' },
                ],secondKindId: [
                    { required: true, message: 'II级机构编号不能位空', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                        if (value && value.toString().length !== 13) {
                            callback(new Error('II级机构编号长度必须为十三位'));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur' }
                ],secondKindName: [
                    { required: true, message: 'II级机构名称不能位空', trigger: 'blur' },
                ],secondSalaryId: [
                    { required: true, message: '薪酬发放责任人编号不能位空', trigger: 'blur' },
                ],secondSaleId: [
                    { required: true, message: '销售责任人编号不能位空', trigger: 'blur' },
                ],
            })
            const select = ref([])//1级结构表下拉框数据
            const cfskid = ref()

            function add(){
                ruleFormRef.value.validate((valid, fields) => {
                if (valid) {
                    let submitData = {};

                    // 合并除了 firstKind 以外的所有属性到 submitData
                    for (const key in ruleForm) {
                        if (key !== 'firstKind') {
                            submitData[key] = ruleForm[key];
                        }
                    }

                    // 如果需要单独提取 firstKindId 和 firstKindName 到 submitData
                    if (ruleForm.firstKind && ruleForm.firstKind.firstKindId) {
                        submitData.firstKindId = ruleForm.firstKind.firstKindId;
                    }
                    if (ruleForm.firstKind && ruleForm.firstKind.firstKindName) {
                        submitData.firstKindName = ruleForm.firstKind.firstKindName;
                    }
                    axios.get("/CFSK/CFSKSelectByCfkid",{
                        params:{
                            fskid:ruleForm.secondKindId
                        }
                    }).then(res =>{
                        if  (res.data == null || cfskid.value == ruleForm.secondKindId){
                             axios.put("/CFSK/CFSKUpdateAsync",null,{
                                params:submitData
                            }).then(res=>{
                                if (res.data > 0){
                                    ElMessage({
                                    type: 'success',
                                    message: '修改成功！'});
                                    dialogVisible.value = true
                                }else{
                                    ElMessage({
                                    type: 'error',
                                    message: '修改失败！'});
                                }
                            }).catch(error =>{
                                console.info(error)
                            })
                        }else{
                            ElMessage({
                                type: 'error',
                                message: '该II级编号已存在！请修改后再次提交'});
                        }
                    }).catch(error =>{
                        console.info(error)
                    })
                }
            })
            }

            function close(){
                window.location.href = "/CFSK/Index"
            }

            function edit(){
                window.location.href = "/CFSK/CFSKInsert"
            }

            //查询下拉框数据
            function selectOpiton(){
                axios.get("/CFSK/CFFKSelectOption").then(res =>{
                    select.value = res.data;
                }).catch(Error =>{
                    console.info(Error)
                })
            }
            selectOpiton();

            function CFSKSelect(){
                axios.get("/CFSK/CFSKSelectById").then(res =>{
                    console.info(res.data)
                    ruleForm.fskId = res.data.fskId
                    ruleForm.secondKindId = res.data.secondKindId
                    cfskid.value = res.data.secondKindId
                    ruleForm.secondKindName = res.data.secondKindName
                    ruleForm.secondSalaryId = res.data.secondSalaryId
                    ruleForm.secondSaleId = res.data.secondSaleId
                    ruleForm.firstKind = {
                        firstKindId: res.data.firstKindId,
                        firstKindName: res.data.firstKindName
                    };
                }).catch(error =>{
                    console.info(error)
                })
            }
            CFSKSelect();

            return {
                ruleForm, ruleFormRef, rules,add,dialogVisible,close,edit,select,cfskid
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>
<style>
    body {
        background-color: #ffffcc;
    }

    .el-form-item__content {
        margin-left: 0px !important;
    }

    .el-form-item__error {
        color: var(--el-color-danger);
        font-size: 12px;
        left: 0;
        line-height: 1;
        padding-top: 2px;
        position: static !important;
        margin-left: 10px;
        top: 100%;
    }

    .el-form-item {
        display: flex;
        --font-size: 14px;
        margin-bottom: 0px !important;
    }

</style>
